<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/fe_components/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/fe_components/jqwidget/blue/bh.min.css" />
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/fe_components/jqwidget/blue/bh-scenes.min.css" />
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/bower_components/animate.css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/bower_components/sentsinLayer/skin/layer.css" />
    <link rel="stylesheet" type="text/css" href="http://res.wisedu.com/fe_components/bhtc/bhtc-datetimepicker/css/blue/bhtc-datetimepicker.css" />
    <script src="http://res.wisedu.com/fe_components/jquery-1.11.3.js"></script>
    <!-- weekUnitPriorityTable -->
    <link rel="stylesheet" type="text/css" href="./weekUnitPriorityTable.css" />
    <script src="./weekUnitPriorityTable.js"></script>
    <style type="text/css">
    .bh-btn-small {
        min-width: 28px;
    }
    </style>
</head>

<body>
    <div style="margin:10px">
        <input type="button" onclick="setResult()" value="初始化结果" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="getResult()" value="获取结果" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="setReadOnly()" value="只读/可写" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="clearAll()" value="清空" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="clearAssign()" value="清除指定项" class="bh-btn bh-btn-primary bh-btn-small" />
    </div>
    <div style="margin:10px">
        <input type="button" onclick="setKey(1)" value="1" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="setKey(2)" value="2" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="setKey(3)" value="3" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="setKey(4)" value="4" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="setKey(5)" value="5" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="clearSelectedByKey()" value="根据key清除选择项" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="clearAllByKey()" value="根据key清空" class="bh-btn bh-btn-primary bh-btn-small" />
        <input type="button" onclick="getResultByKey()" value="根据key获取结果" class="bh-btn bh-btn-primary bh-btn-small" />
        当前key:<span id="keySpan">1</span>
    </div>

    <div class="d" style="width:1300px;margin:10px;"></div>

    <script type="text/javascript">
    var weekUnitPriorityTable = new WeekUnitPriorityTable({
        container: '.d'
    });
    weekUnitPriorityTable.render();

    function setKey(key) {
        weekUnitPriorityTable.setKey(key);
        $('#keySpan').html(key);
    }

    function setResult() {
        weekUnitPriorityTable.setResult([{
            unit: '1',
            week: '1',
            vals: '1',
            key: '1'
        }, {
            unit: '2',
            week: '2',
            vals: '2',
            key: '1'
        }, {
            unit: '3',
            week: '3',
            vals: '3',
            key: '2'
        }, {
            unit: '4',
            week: '4',
            vals: '1',
            key: '2'
        }, {
            unit: '4',
            week: '4',
            vals: '3',
            key: '3'
        }]);
    }

    function getResult() {
        var result = weekUnitPriorityTable.getResult();
        console.log(result);
    }

    function setReadOnly() {
        if (weekUnitPriorityTable.params.readOnly) {
            weekUnitPriorityTable.setReadOnly(false);
        } else {
            weekUnitPriorityTable.setReadOnly(true);
        }
    }

    function clearAll() {
        weekUnitPriorityTable.clearAll();
    }

    function clearAssign() {
        var weekUnits = [{
            week: '1',
            unit: '1'
        }, {
            week: '2',
            unit: '1'
        }];
        weekUnitPriorityTable.clearAssign(weekUnits);
    }

    function clearSelectedByKey() {
        weekUnitPriorityTable.clearSelectedByKey();
    }

    function clearAllByKey() {
        weekUnitPriorityTable.clearAllByKey();
    }

    function getResultByKey() {
        console.log(weekUnitPriorityTable.getResultByKey());
    }
    </script>
</body>

</html>
